<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <h1>12 Pagination Ideas</h1>
    <div class="pagination p1">
        <ul>
            <a href="#"><li><</li></a>
            <a class="is-active" href="#"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a href="#"><li>4</li></a>
            <a href="#"><li>5</li></a>
            <a href="#"><li>6</li></a>
            <a href="#"><li>></li></a>
        </ul>
    </div>
    <div class="pagination p2">
        <ul>
            <a href="#"><li>1</li></a>
            <a class="is-active" href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a href="#"><li>4</li></a>
            <a href="#"><li>5</li></a>
            <a href="#"><li>6</li></a>
        </ul>
    </div>
    <div class="pagination p3">
        <ul>
            <a href="#"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a class="is-active" href="#"><li>3</li></a>
            <a href="#"><li>4</li></a>
            <a href="#"><li>5</li></a>
            <a href="#"><li>6</li></a>
        </ul>
    </div>
    <div class="pagination p4">
        <ul>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a class="is-active" href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
        </ul>
    </div>
    <div class="pagination p5">
        <ul>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a class="is-active" href="#"><li></li></a>
            <a href="#"><li></li></a>
        </ul>
    </div>
    <div class="pagination p6">
        <ul>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a href="#"><li></li></a>
            <a class="is-active" href="#"><li></li></a>
            <a href="#"><li></li></a>
        </ul>
    </div>
    <div class="pagination p7">
        <ul>
            <a class="is-active" href="#"><li>Previous</li></a>
            <a href="#"><li>Next</li></a>
        </ul>
    </div>
    <div class="pagination p8">
        <ul>
            <a class="is-active" href="#"><li><</li></a>
            <a href="#"><li>></li></a>
        </ul>
    </div>
    <div class="pagination p9">
        <ul>
            <a href="#"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a class="is-active" href="#"><li>4</li></a>
            <a href="#"><li>5</li></a>
            <a href="#"><li>6</li></a>
        </ul>
    </div>
    <div class="pagination p10">
        <ul>
            <a href="#"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a href="#"><li>4</li></a>
            <a class="is-active" href="#"><li>5</li></a>
            <a href="#"><li>6</li></a>
        </ul>
    </div>
    <div class="pagination p11">
        <ul>
            <a href="#"><li>Previous</li></a>
            <a class="is-active" href="#"><li>Next</li></a>
        </ul>
    </div>
    <div class="pagination p12">
        <ul>
            <a href="#"><li>Previous</li></a>
            <a href="#"><li>1</li></a>
            <a href="#"><li>2</li></a>
            <a href="#"><li>3</li></a>
            <a href="#"><li>4</li></a>
            <a href="#"><li>5</li></a>
            <a class="is-active" href="#"><li>6</li></a>
            <a href="#"><li>Next</li></a>
        </ul>
    </div>
</div>
</body>
</html>
